<template>
  <el-table :data="tableData" :border="parentBorder" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <div style="justify-content: space-around; display: flex">
          <h3>列车时刻表</h3>
          <el-button>Add </el-button>
        </div>

        <el-table :data="props.row.schedules" :border="childBorder">
          <el-table-column label="sid" prop="sid" />
          <el-table-column label="trainno" prop="trainno" />
          <el-table-column label="fromnm" prop="fromnm" />
          <el-table-column label="tonm" prop="tonm" />
          <el-table-column align="right">
            <template #header>
              <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
            <template #default>
              <el-button size="small">Edit</el-button>
              <el-button size="small" type="danger">Delete</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column label="#" prop="tlid" />
    <el-table-column label="车次" prop="trainno" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default>
        <el-button size="small">Edit</el-button>
        <el-button size="small" type="danger">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { ref, onMounted } from 'vue'
import { useTrainlineStore } from '../../stores/trainline.js'
const parentBorder = ref(true)
const trainlineStore = useTrainlineStore()
const { tableData } = storeToRefs(trainlineStore)

onMounted(() => {
  trainlineStore.loadwithschedule()
})
</script>
